<template>
	<div class="foots margin-left-right">
		<div class="info-top">
			<div class="icon-left-option">
			<img class="icon" src="@/assets/pc/logo.png"/>
				<div class="icon-txt">电商客服</div>
				<div class="icon-txt-two">Ai</div>
			</div>

			<div class="right-option">
				<div class="right-one-option">
					<div class="txt-header">关于我们</div>
					<div class="txt-box">
						<div class="txt-two-1">公司动态</div>
						<div class="txt-two-2">公司介绍</div>
					</div>
				</div>
				<div class="right-one-option">
					<div class="txt-header">客服微信</div>
					<div class="txt-box">  
						<img  src="@/assets/pc/roll_right_person_1.png" class="wx-code"/>
						<div class="wx-code-txt">AI阮总</div>

					</div>
				</div>
				<div class="right-one-option">
					<div class="txt-header">关注我们</div>
					<div class="txt-box">
						<img  src="@/assets/pc/roll_right_person_2.png" class="wx-code"/>
						<div class="wx-code-txt">地瓜瓜</div>
					</div>
				</div>
				<div class="right-one-option">
					<div class="txt-header txt-header-none">11</div>
					<div class="txt-box">
						<img  src="@/assets/pc/roll_right_small_program.png" class="wx-code"/>
						<div class="wx-code-txt">小黄</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom-txt-box">
			<div class="txt-one">Copyright © 2025 www.dskfai.com All Rights Reserved Powered by 湖南智通星辰科技有限公司</div>
			<div class="txt-two">湘公网安备11000002000001号</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Foots',
	data() {
		return {

		}
	},
	created() {

	},
	methods: {

	}
}
</script>
<style scoped lang="scss">
.foots {
	padding-bottom: 20px;
	font-size: 14px;
	background: #F9F9F9;
	height: 293px;
}

.bottom-txt-box {
	margin-top: 57px;
	display: flex;
	align-items: center;	
	justify-content: center;
	color: rgba(102, 102, 102, 1);
}

.margin-left-right {
	padding-left: 8.5vw;
		padding-right: 8.5vw;
}

.txt-two {
	margin-left: 24px;
}


.info-top {
	margin-top: 62px;
	display: flex;
	align-items: flex-start;

	justify-content: space-between;

	.icon-left-option {
		.icon {
			width: 60px;
			height: 54px;
		}

		display: flex;
		align-items: center;

		.icon-txt {
			margin-left: 24px;
			font-size: 30px;
			font-weight: 700;
		}

		.icon-txt-two {
			margin-left: 8px;
			width: 49px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border-top-left-radius: 7px;
			border-top-right-radius: 8px;
			border-bottom-right-radius: 8px;
			background: #C9E8FF;
			font-size: 18px;
			font-weight: 700;
			color: rgba(37, 158, 250, 1);
		}
	}

	.right-option {
		display: flex;
		align-items: flex-start;

		.right-one-option {

			margin-right: 62px;

			.txt-header {
				font-size: 24px;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}

			.txt-header-none {
				visibility: hidden;
			}

			.txt-box {
				margin-top: 20px;

				.txt-two-1 {
					font-size: 18px;
					font-weight: 400;
				}

				.txt-two-2 {
					margin-top: 12px;
					font-size: 18px;
					font-weight: 400;
				}

				.wx-code {
					width: 129px;
					height: 129px;
				}

				.wx-code-txt {
					margin-top: 20px;
					font-size: 14px;
					font-weight: 400;
				}
			}
		}
	}
}

@media screen and (max-width: 991px) {


	/* 样式规则 */
	.margin-left-right {
		padding-left: 0.3vw;
		padding-right: 0.3vw;
		
	}

	.bottom-txt-box {
		display: flex;
		align-items: center;
		justify-content: center;
		.txt-two {
			margin-left: 14px;
		}
	}

	.info-top {
		margin-top: 62px;
		display: flex;
		align-items: flex-start;

		justify-content: space-between;

		.icon-left-option {
			.icon {
				width: 60px;
				height: 54px;
			}

			display: flex;
			align-items: center;

			.icon-txt {
				margin-left: 18px;
				font-size: 25px;
				font-weight: 700;
			}

			.icon-txt-two {
				margin-left: 6px;
				width: 45px;
				height: 25px;
				line-height: 25px;
				text-align: center;
				border-top-left-radius: 7px;
				border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
				background: #C9E8FF;
				font-size: 16px;
				font-weight: 700;
				color: rgba(37, 158, 250, 1);
			}
		}

		.right-option {
			display: flex;
			align-items: flex-start;

			.right-one-option {

				margin-right: 32px;

				.txt-header {
					font-size: 18px;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);
				}

				.txt-header-none {
					visibility: hidden;
				}

				.txt-box {
					margin-top: 20px;

					.txt-two-1 {
						font-size: 14px;
						font-weight: 400;
					}

					.txt-two-2 {
						margin-top: 12px;
						font-size: 14px;
						font-weight: 400;
					}

					.wx-code {
						width: 100px;
						height: 100px;
					}

					.wx-code-txt {
						margin-top: 20px;
						font-size: 12px;
						font-weight: 400;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 767px) {

	/* 样式规则 */
	.margin-left-right {
		padding-left: 0.1vw;
        padding-right: 0.1vw;
	}

	.bottom-txt-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
	.info-top {
		margin-top: 62px;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;

		.icon-left-option {
			.icon {
				width: 50px;
				height: 44px;
			}

			display: flex;
			align-items: center;

			.icon-txt {
				margin-left: 24px;
				font-size: 18px;
				font-weight: 700;
			}

			.icon-txt-two {
				margin-left: 8px;
				width: 44px;
				height: 25px;
				line-height: 25px;
				text-align: center;
				border-top-left-radius: 7px;
				border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
				background: #C9E8FF;
				font-size: 14px;
				font-weight: 700;
				color: rgba(37, 158, 250, 1);
			}
		}

		.right-option {
			display: flex;
			align-items: flex-start;
			margin-top: 12px;

			.right-one-option {
				margin-right: 12px;

				.txt-header {
					font-size: 14px;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);
				}

				.txt-header-none {
					visibility: hidden;
				}

				.txt-box {
					margin-top: 20px;

					.txt-two-1 {
						font-size: 12px;
						font-weight: 400;
					}

					.txt-two-2 {
						margin-top: 12px;
						font-size: 12px;
						font-weight: 400;
					}

					.wx-code {
						width: 90px;
						height: 90px;
					}

					.wx-code-txt {
						margin-top: 20px;
						font-size: 14px;
						font-weight: 400;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 480px) {
	.foots {
		font-size: 14px;
	}

	/* 样式规则 */
	.margin-left-right {
	padding-left: 24px;
		padding-right: 24px;
	}

	.bottom-txt-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.info-top {
		margin-top: 62px;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;

		.icon-left-option {
			.icon {
				width: 36px;
				height: 36px;
			}

			display: flex;
			align-items: center;

			.icon-txt {
				margin-left: 24px;
				font-size: 16px;
				font-weight: 700;
			}

			.icon-txt-two {
				margin-left: 8px;
				width: 39px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				border-top-left-radius: 7px;
				border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
				background: #C9E8FF;
				font-size: 14px;
				font-weight: 700;
				color: rgba(37, 158, 250, 1);
			}
		}

		.right-option {
			display: flex;
			align-items: flex-start;
			margin-top: 12px;

			.right-one-option {
				margin-right: 12px;

				.txt-header {
					font-size: 14px;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);
				}

				.txt-header-none {
					visibility: hidden;
				}

				.txt-box {
					margin-top: 20px;

					.txt-two-1 {
						font-size: 10px;
						font-weight: 400;
					}

					.txt-two-2 {
						margin-top: 12px;
						font-size: 10px;
						font-weight: 400;
					}

					.wx-code {
						width: 45px;
						height: 45px;
					}

					.wx-code-txt {
						margin-top: 20px;
						font-size: 12px;
						font-weight: 400;
					}
				}
			}
		}
	}

}
</style>